<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuex-State</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>

<div id="app">
  <h2>{{msg}}</h2>
  <counter></counter>
</div>

<script>
  // 定义一个组件
  const counter = {
    template:'<div>{{count}}</div>',
    computed:{
      count(){
        return this.$store.state.count;
      }
    }
  };

  // 定义一个状态
  const store = new Vuex.Store({
    state: {
      count: 10
    }
  });

  new Vue({
    el:'#app',
    store,
    data:{
      msg:'Vuex的使用'
    },
    components:{
      counter
    }
  });
</script>
</body>
</html>
